<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  getRequstListApi,
  agreeFriendsApi,
  refuseFriendsApi,
} from "../api/friendsShip";
import { useRequireListStore } from "../store/requireListStore";
import { showToast } from "vant";

const requireListStore = useRequireListStore();

const dataList = ref<IRequire[]>();

const getRequstList = () => {
  getRequstListApi().then((res) => {
    dataList.value = res.data;
  });
};

const agree = async (id: number) => {
  await agreeFriendsApi(id);
  getRequstList();
  showToast({
    message: "已同意",
    position: "bottom",
  });
};

const refuse = async (id: number) => {
  await refuseFriendsApi(id);
  getRequstList();
  showToast({
    message: "已拒绝",
    position: "bottom",
  });
};

onMounted(() => {
  if (!requireListStore.requireList?.length) {
    getRequstList();
  } else {
    dataList.value = requireListStore.requireList;
  }
});
</script>

<template>
  <div class="require">
    <VanNavBar
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      title="好友请求"
      back
    />

    <div class="search__res">
      <div v-for="item in dataList" class="search__res-item">
        <div class="search__res-name">
          {{ item.user.username }}
        </div>

        <div style="display: flex; gap: 10px">
          <div class="search__res-line" @click="agree(item.fromUserId)">
            同意
          </div>
          <div
            class="search__res-line"
            @click="refuse(item.fromUserId)"
            style="color: red"
          >
            拒绝
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
